// 这里好似99.9拼团
<template>
  <div>
    <div class="divUl" v-for="(item,index) in groupData" :key="index">
      <img :src="item.activeBannerUrl">
      <div class="text-Box">
        <h3>{{ item.masterTitle }}</h3>
        <p class="p1">
          <span>{{item.slaveTitle}}</span>
        </p>
        <div class="item-prict">
          <span class="span1">￥{{item.price/100}}</span>&nbsp;
          <del class="span2">原价:￥{{ item.marketPrice/100 }}</del>
          <div class="divImg">
            <img :src="item1.icon" class="img1" v-for="(item1,index) in item.userList" :key="index">
          </div>
          <div class="pinDan">去拼单</div>
        </div>
      </div>
      <div class="borderBox"></div>
    </div>
    <!-- <router-link tag="div" class="divFixedBox">
      <i class="iconfont">&#xe601;</i>
    </router-link>-->
    <div class="divFixedBox">
      <i class="iconfont">←</i>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "mint-ui";
export default {
  name: "group",
  data() {
    return {
      groupData: []
    };
  },
  created() {
    Toast("请求成功");
    // 页面创建之后就发送请求
    axios.get("/api/films/group").then(res => {
      let result = res.data;
      console.log(result);
      if (result.code === 0) {
        this.groupData = result.data;
      }
    });
  }
};
</script>

 <style lang="scss">
@import "@/style/common/px2rem.scss";
.divUl {
  display: flex;
  flex: 1;
  flex-direction: column;

  img {
    width: 100%;
  }
  .text-Box {
    padding: px2rem(15);
    h3 {
      height: px2rem(20);
      line-height: px2rem(20);
      margin-bottom: px2rem(5);
    }
    .p1 {
      width: 100%;
      span {
        font-size: px2rem(14);
        color: rgb(121, 125, 130);
        // line-height: px2rem(16);
      }
    }
  }
  .item-prict {
    width: 100%;
    height: px2rem(40);
    line-height: px2rem(40);
    position: relative;
    .span1 {
      color: red;
      font-size: px2rem(18);
    }
    .span2 {
      color: rgb(121, 125, 130);
      font-size: px2rem(12);
    }
    .divImg {
      position: absolute;
      top: 50%;
      margin-top: px2rem(-15);
      left: 55%;
      height: px2rem(40);
      img {
        width: px2rem(30);
        border-radius: 50%;
        &:nth-of-type(2) {
          position: absolute;
          left: px2rem(20);
          z-index: -1;
        }
      }
    }
    .pinDan {
      width: px2rem(80);
      height: px2rem(35);
      background: rgb(192, 49, 49);
      border-radius: px2rem(5);
      display: inline-block;
      position: absolute;
      top: 50%;
      margin-top: px2rem(-17);
      right: 0;
      text-align: center;
      line-height: px2rem(35);
      color: white;
    }
  }
  .borderBox {
    background: rgb(244, 244, 244);
    height: px2rem(10);
  }
}
.divFixedBox {
  width: px2rem(35);
  height: px2rem(35);
  background: #000;
  border-radius: 50%;
  opacity: 0.4;
  z-index: 100;
  position: fixed;
  top: px2rem(10);
  left: px2rem(10);
  text-align: center;

  .iconfont {
    font-size: px2rem(25);
    color: red;
    line-height: px2rem(35);
  }
}
</style>
